<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<%@taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">

		<title>My JSP 'img_test_input.jsp' starting page</title>

		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		<link rel="stylesheet" type="text/css"
			href="<%=basePath%>css/imgareaselect-animated.css">
		<link rel="stylesheet" type="text/css"
			href="<%=basePath%>css/ajaxfileupload.css">
		<script type="text/javascript" src="<%=basePath%>js/jquery.min.js"></script>
		<script type="text/javascript"
			src="<%=basePath%>js/jquery.imgareaselect.js"></script>
		<script type="text/javascript" src="<%=basePath%>js/ajaxfileupload.js"></script>
		<script type="text/javascript">
		var pic_real_width,pic_real_height;
		/*$(document).ready(
		function () 
		{ 
			$('#img1').imgAreaSelect({ 
				handles: true,
				x1:0,
				y1:0,
				x2:100,
				y2:100,
				imageHeight:pic_real_height,
				imageWidth:pic_real_width,
				onSelectEnd: function (img, selection) 
				{
					//alert('width: ' + selection.width + '; height: ' + selection.height); 
					$("#x1").val(selection.x1);
					$("#y1").val(selection.x2);
					$("#width").val(selection.width);
					$("#height").val(selection.height);
					
				}
			}); 
		});*/
		function ajaxFileUpload() {
		$("#loading")

		.ajaxStart(function() {

			$(this).show();

		})

		.ajaxComplete(function() {

			$(this).hide();

		});
		$.ajaxFileUpload({
			url : '<%=basePath%>test/ajaxFileUploadTest.action',
			secureuri : false,
			fileElementId : 'upload',
			dataType : 'json',
			success : function(data, status) {
				if (typeof (data.error) != 'undefined') {
					if (data.error != '') {
						alert(data.error);
					} else {
						$("#img1").attr("src",data.msg).show();
						$("#myFileName").val($("#img1").attr("src"));
						//alert(data.msg);
						//get img real width and height
						var img = $("#img1"); // Get my img elem
						/*var pic_real_width, pic_real_height;*/
						$("<img/>") // Make in memory copy of image to avoid css issues
  							.attr("src", $(img).attr("src"))
    						.load(function() {
   							     pic_real_width = this.width;   // Note: $(this).width() will not
        						pic_real_height = this.height; // work for in memory images.
        						//初始化4个值，以防因为未选择而出现空值。
    							$("#x1").val(0);
								$("#y1").val(0);
								$("#width").val(pic_real_width);
					    		$("#height").val(pic_real_height);
    					});
    					
					    //imgAreaSelect
    					$('#img1').imgAreaSelect({ 
							handles: true,
							onSelectEnd: function (img, selection) 
							{
								/*alert('imgWidth='+imageWidth+' imgHeight='+imageHeight);*/
								//alert('width: ' + selection.width + '; height: ' + selection.height); 
								var realX1,realY1,realSelWidth,realSelHeight,scaleX,scaleY;
								scaleX=200/pic_real_width;
								scaleY=200/pic_real_height;//缩放比例
								realX1=Math.round(selection.x1/scaleX);
								realY1=Math.round(selection.y1/scaleY);
								realSelWidth =Math.round( selection.width/scaleX);
								realSelHeight = Math.round(selection.height/scaleY);
								$("#x1").val(realX1);
								$("#y1").val(realY1);
								$("#width").val(realSelWidth);
								$("#height").val(realSelHeight);
								
							}
						});
						
					}
				}
			},
			error : function(data, status, e) {
				alert(e);
			}
		});

		return false;

	}
	
</script>
	</head>

	<body>
		<form name="form" action="" method="POST"
			enctype="multipart/form-data">
			<input id="upload" name="upload" type="file" />
			<br>
			<button class="button" id="buttonUpload"
				onclick="return ajaxFileUpload();">
				Upload
			</button>
		</form>
		<img id="loading" src="<%=basePath%>img/loading.gif"
			style="display: none;">
		<br>
		<img id="img1"  src="" style="display: none; height:200px; width:200px;">
		<form name="cut" action="<%=basePath%>test/doResize.action"
			method="post">
			<input type="hidden" id="x1" name="x1" value="0">
			<input type="hidden" id="y1" name="y1" value="0">
			<input type="hidden" id="width" name="width">
			<input type="hidden" id="height" name="height">
			<input type="hidden" id="myFileName" name="myFileName">
			<input type="submit" value="submit">
		</form>
	</body>
</html>
